<template>
	<view>
		<view class="u-m-t-30 bg-white u-p-l-30 u-p-r-30 u-m-l-30 u-m-r-30 border-ra" v-for="(item, index) in orderList" :key="index" :style="{background: vk.getVuex('$app.config.bg.tab')}">
			<view class="tab u-flex u-row-between border-bottom" :style="{borderColor: vk.getVuex('$app.config.color.border')}">
				<view class="" @click="copyClick(item.number)" :style="{color: vk.getVuex('$app.config.color.main')}">单号：{{item.number}}</view>
				<view class="u-font-13" :style="{color: vk.getVuex('$app.config.color.tips')}">{{item._add_time_str.substr(0,16)}}</view>
			</view>
			<view class="u-flex u-row-left u-p-b-30 u-p-t-30 border-bottom" :style="{borderColor: vk.getVuex('$app.config.color.border')}">
				<view class="" style="width: 130rpx;height: 160rpx;">
					<image :src="item.tip.image" style="width: 130rpx;height: 160rpx;border-radius: 12rpx;"></image>
				</view>
				<view class="u-p-l-30">
					<view class="u-flex-col u-row-around" style="height: 160rpx;">
						<view class="u-p-b-15 u-line-1" style="width: 475rpx;" :style="{color: vk.getVuex('$app.config.color.main')}">{{item.tip.name}}</view>
						<view class="u-font-13" :style="{color: vk.getVuex('$app.config.color.tips')}">在线发卡</view>
						<view class="u-font-13" :style="{color: vk.getVuex('$app.config.color.tips')}">{{vk.getVuex('$setting.score.name')}} {{item.score}}</view>
					</view>
					<view class="" style="position: absolute;right: 30rpx;bottom: 30rpx;">
						<view class="btn" @click="copyClick(item.cdk)" :style="{backgroundImage: vk.getVuex('$app.config.bg.button'), color: vk.getVuex('$app.config.color.button')}">复制卡密</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="!noData"><u-loadmore :status="loadStatus" font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8" /></view>
		<nodata v-else width="750rpx" height="50vh"></nodata>
		<view class="safe-area-inset-bottom" style="height: 30rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				// 无数据
				noData: false,
				// 分页
				pageIndex: 0,
				loadStatus: 'loading',
			}
		},
		async onLoad() {
			let that = this
			await that.getOrderList()
		},
		methods: {
			async getOrderList(){
				let that = this
				
				// 点击切换菜单 回复初始状态
				that.pageIndex = that.pageIndex + 1
				that.loadStatus = 'loading'

				let res = await that.vk.callFunction({
					url: 'client/wechat/list/kh/getList',
					data: {
						dbName: 'bus-wx-tip-order',
						pageIndex: that.pageIndex,
						pageSize: 10,
						whereJson: {
							user_id: that.vk.getVuex('$user.userInfo._id')
						},
						sortArr: [{name: '_add_time', type: 'desc'}],
						foreignDB: [{
							dbName: "bus-wx-tip",
							localKey:"tip_id",
							foreignKey: "_id",
							as: "tip",
							limit: 1
						}]
					}
				});
				uni.hideLoading()
				that.orderList = that.orderList.concat(res.rows)
				if(res.hasMore) that.loadStatus = 'loadmore'
				else that.loadStatus = 'nomore'
				if(res.total == 0) that.noData = true
				else that.noData = false
			},
			copyClick(e){
				var that = this
				uni.setClipboardData({
				    data: e,
				    success: function () {
						that.$u.toast('复制成功！');
				    }
				});
			},
		},
		onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			that.getOrderList()
		}
	}
</script>

<style lang="scss">
	.btn{
		font-size: 13px;
		text-align: center;
		position: relative;
		color: #562000;
		width: 160rpx;
		line-height: 48rpx;
		border-radius: 8rpx;
		background-image: linear-gradient(to bottom right, #fce03d, #f8c93c);
	}
	.tab{
		height: 100rpx;
		line-height: 100rpx;
	}
	.border-bottom{
		border-bottom: 1rpx solid #1F1F1F;
	}
	.border-ra{
		border-radius: 16rpx;
	}
	.bg-white{
		background-color: #282828;
		position: relative;
		// box-shadow: 0 0px 24px rgba(231, 231, 231, 0.65);
	}
</style>
